<template>
  <section>
    <div class="totalTitle">
<!--      <img src="../assets/竖线图标2.png" alt="">-->
      <h3>热门商品</h3>
<!--      <img src="../assets/竖线图标.png" alt="">-->
      <van-button
          style="width:65px;"
          @click="changeGoods"
          size="mini"
          icon="replay"
          round
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          type="primary"
      >换一换</van-button>
    </div>
    <div class="prefecture">
<!--      水果-->
      <router-link to="/index/classify" class="fruitBox">
        <img src="../../assets/fruit.png" alt="">
        <div class="fruitTitle">
          <h4>家庭必备水果</h4>
          <span>惊爆款</span>
        </div>
        <div class="priceBox">
          <p>低至 <span>0.99</span>元起</p>
          <button>GO>></button>
        </div>
      </router-link>
<!--      右侧-->
      <div class="right">
<!--        蔬菜-->
        <div class="vegBox">
          <router-link to="/index/classify">
            <div class="vegTitle">
              <h4>家常蔬菜</h4>
              <span>惊爆款</span>
            </div>
            <div class="vegPriceBox">
              <div>
                <p>低至 <span>1.99</span>元起</p>
                <button>GO>></button>
              </div>
              <img src="../../assets/vegetables.png" alt="">
            </div>
          </router-link>
        </div>
<!--        零食-->
        <div class="vegBox">
          <router-link to="/index/classify">
            <div class="vegTitle">
              <h4>零食小天地</h4>
              <span>惊爆款</span>
            </div>
            <div class="vegPriceBox">
              <div>
                <p>低至 <span>0.99</span>元起</p>
                <button>GO>></button>
              </div>
              <img src="../../assets/snacks.webp" alt="">
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <!--    请求的商品-->
    <div v-if="isLoading">
      <Loading></Loading>
    </div>
<!--    触底加载-->
    <div v-else class="flexBox">
      <GoodBlock
          :item="item"
          v-for="item in hotList"
          :key="item.goodsId"
          class="animate__animated animate__bounceIn"
      />
    </div>
  </section>
</template>

<script>
import {hotGoods} from "@/api/api";
import Loading from "@/components/Index/Loading";
import GoodBlock from "@/components/Index/GoodBlock";

export default {
  name: "PopularGoods",
  components: {
    Loading,
    GoodBlock,
  },
  data() {
    return {
      //加载中
      isLoading: true,
      hotList: [],
      count:2,
    }
  },
  methods: {
  //  换一换
    changeGoods(){
      let countRandom = parseInt(Math.random() * 7 + 1)
      if(this.count != countRandom){
        this.count = countRandom
        console.log(this.count)
        this.getDailyGoods(this.count)
      }else{
        this.changeGoods()
      }
    },
    //  请求推荐列表数据
    getDailyGoods(pageNum){
      hotGoods(pageNum).then(res=>{
        if(res.data.code == 0){
          this.isLoading = false
          this.hotList = res.data.rows
        }
      })
    }
  },

  created() {
    this.getDailyGoods(this.count)
  }
}
</script>

<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
section{
  width: 100%;
  margin: auto;
  .totalTitle{
    text-align: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    h3{
      width: 48%;
      margin: 20px;
      text-align: center;
    }
    /deep/.van-button{
      margin-right: 20px;
    }
  }

  .prefecture{
    padding: 0 15px;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    //水果
    .fruitBox{
      padding: 5px;
      //margin-left: 20px;
      width:44%;
      border-radius: 15px;
      box-shadow: 2px 2px 3px 1px #dddddd;
      img{
        display: block;
        margin: auto;
        width: 50%;
        height: 80px;
      }
      .fruitTitle{
        display: flex;
        justify-content: space-around;
        span{
          font-size: 20px;
          color: #EC0D0D;
          font-weight: bold;
        }
      }
      .priceBox{
        p{
          margin: 10px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          }
          span{
            color: #EC0D0D;
            font-size: 20px;
          }
          button{
            width: 55px;
            height: 20px;
            border: 0;
            border-radius: 50px;
            color: white;
            font-size: 14px;
            background-color: gold;
          }
      }
    }
    .right{
      margin-left: 15px;
      width: 44%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
    //蔬菜
    .vegBox{
      width: 95%;
      padding: 5px;
      border-radius: 15px;
      box-shadow: 2px 2px 3px 1px #dddddd;
      .vegTitle{
        display: flex;
        justify-content: space-around;
        span{
          font-size: 17px;
          color: #EC0D0D;
          font-weight: bold;
        }
      }
      .vegPriceBox{
        display: flex;
        justify-content: center;
        align-items: center;
        p{
          width: 80%;
          margin: 10px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span{
          color: #EC0D0D;
          font-size: 20px;
        }
        button{
          width: 55px;
          height: 20px;
          border: 0;
          border-radius: 50px;
          color: white;
          font-size: 14px;
          background-color: gold;
        }
        img{
          width: 30%;
          height: 49px;
          border-radius: 15px;
        }
      }
    }
  }
  //请求
  .flexBox{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    //margin-bottom: 30px;
    padding: 0 10px;
  }
}
</style>